<template>
  <div class="shop">
    <div class="like">
      <h2>猜你喜欢</h2>
      <ul class="sorting">
        <li
          v-for="(item, index) in sorting"
          :key="index"
          @click="jump(index)"
          :class="{ active: currentIndex == index }"
        >
          {{ item }}
        </li>
      </ul>
      <ul class="label">
        <li v-for="(item, index) in label" :key="index">{{ item }}</li>
      </ul>
    </div>
    <div
      class="shoplist"
      v-for="(item, index) in shoplist"
      :key="index"
      @click="$router.push('/detail/' + item.mtWmPoiId)"
    >
      <div class="imgBox">
        <img v-lazy="item.picUrl" alt="" />
      </div>
      <div class="text">
        <h2>{{ item.name }}</h2>
        <div class="score">
          <van-icon name="star" />
          <span>{{ item.wmPoiScore / 10 }}</span>
          <span>{{ item.monthSalesTip }}</span>
        </div>
        <div class="send">
          <span> {{ item.minPriceTip }} {{ item.shippingFeeTip }} </span>
          <span> {{ item.deliveryTimeTip }} {{ item.distance }} </span>
        </div>
        <div class="evaluation">
          <span>
            {{ item.averagePriceTip }}
          </span>
        </div>
        <div class="coupons">
          <span v-for="(v, i) in item.discounts2" :key="i">{{ v.info }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shop } from "@/utils/api";
export default {
  data() {
    return {
      currentIndex: 0,
      sorting: ["综合排序", "评分最高", "销量最高", "筛选"],
      label: ["年货节热卖", "津贴联盟", "满减优惠", "品质联盟"],
      shoplist: [],
      boole: true,
    };
  },
  mounted() {
    shop().then((res) => {
      console.log(res.data.list);
      this.shoplist = res.data.list;
    });
  },
  methods: {
    jump(index) {
      this.currentIndex = index;
      if (index == 1) {
        if (this.bool) {
          this.shoplist.sort((a, b) => {
            return a.wmPoiScore - b.wmPoiScore;
          });
          this.bool = false;
        } else {
          this.shoplist.sort((a, b) => {
            return b.wmPoiScore - a.wmPoiScore;
          });
          this.bool = true;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.shop {
  margin: 0.2667rem;
  .like {
    h2 {
      font-size: 0.5rem;
    }
    .sorting {
      display: flex;
      justify-content: space-between;
      li {
        font-size: 0.46rem;
        margin: 0.2rem 0 0.1rem 0;
      }
    }
    .label {
      display: flex;
      justify-content: space-between;
      li {
        font-size: 0.3733rem;
        background-color: #eee;
        padding: 0.2133rem 0.2667rem;
        border-radius: 0.1333rem;
        margin: 0.2667rem 0;
      }
    }
  }
  .shoplist {
    display: flex;
    margin: 0.2667rem 0 0.5333rem 0;
    .imgBox {
      width: 2.1333rem;
      height: 2.1333rem;
      margin-right: 0.2667rem;
      margin-top: 0.1333rem;
      font-size: 0;
      img {
        border: 1px solid #ccc;
        width: 100%;
        height: 100%;
        border-radius: 0.1333rem;
      }
    }
    .text {
      flex: 1;
      font-size: 0.3733rem;
      h2 {
        font-size: 0.455rem;
        font-weight: bold;
      }
      .score {
        margin: 0.05rem 0;
        color: orange;
        span:last-child {
          color: #999;
          margin-left: 0.4rem;
        }
      }
      .send {
        display: flex;
        justify-content: space-between;
        font-size: 0.3733rem;
        color: #999;
        margin: 0.1333rem 0;
      }
      .evaluation {
        span {
          font-size: 0.32rem;
          background-color: rgb(254, 234, 195);
          padding: 0.08rem 0.16rem;
          border-radius: 0.08rem;
          // opacity: 0.5;
          color: orangered;
        }
      }
      .coupons {
        display: flex;
        flex-wrap: wrap;
        span {
          border: 1px solid rgb(249, 175, 175);
          color: red;
          padding: 0.0533rem 0.1333rem;
          margin: 0.1333rem 0.1333rem 0 0;
          border-radius: 0.08rem;
          font-size: 10px;
        }
      }
    }
  }
}
.active {
  font-weight: 700;
}
</style>